const path = require("path");
/*
  vue的模块化环境启动的配置文件，当该文件在项目根目录存在时，vue模块项目启动会自动加载该文件，
  通过文件提供的相关配置修改启动模式
*/
// 为开发者提供配置提示
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  // 部署应用包时的基本 URL ==> 项目从开发服务器迁移到生产服务器时存放的路径文件夹地址 
  //                       ==> 用于开发时模拟生产服务器环境
  //                       ==> 如果publicPath 取值不是 / ，开发环境会默认启动两个访问路径
  //                              + 服务器根访问路径  + 服务器publicPath 访问路径
  //        默认值是 / 
  //        publicPath 原名称叫做 baseUrl 可以被 html 模板页面加载使用
  // publicPath:"/test/",
  // publicPath:"/",
  publicPath:"/wbs22062-web/",

  // devServer 用于修改启动的服务器的相关配置
  devServer:{
    // 0.0.0.0 ==> 不是真正的服务器地址IP，是服务器启动告知系统自动分配IP
    // host:"0.0.0.0",
    //端口 ：vue的模块化服务器使用的端口为自增模式，port 提供初始端口号，当该端口被占用时会在默认端口基础上+1启动
    // port:3000,
    
    // 启动当前项目的代理服务器
    proxy:{
      // key:value  => key 用于描述当前项目中需要被代理的请求前缀
      //            => value 取值 {} 配置，用于详细描述代理的相关设置
      "/proxyApi":{
        // 真实服务器接口  http://127.0.0.1:30002/aaaa
        // 例如 axios.get("/proxyApi/aaaa")  =>  http://127.0.0.1:30002/proxyApi/aaaa
        // target:"http://127.0.0.1:3002/api/", // 代理后的目标服务器
        target:"http://127.0.0.1:3002/api", // 代理后的目标服务器
        pathRewrite: {
          // key 匹配的重写 正则 规则
          // 真实服务器接口  http://127.0.0.1:30002/aaaa
          // 例如 axios.get("/proxyApi/aaaa")  => /aaaa => http://127.0.0.1:30002/aaaa
          "^/proxyApi": ""
        },
        // 改变日志等级 默认info
        logLevel:"debug",
        // 改变日志输出方式
        logProvider:function(){
          return console
        }
      }
    }
  },

  // 定义项目启动时的加载文件
  pages:{
    // 任何的模块化框架项目，可以在一个运行环境下，加载出下述的两种项目模式
    // SPA项目：单页应用程序 => 页面不会重复刷新 => 只有一个主要的HTML页面文件，其它内容同过JS方式渲染
    // MPA项目：多页应用程序 => 一个环境运行多个 SPA 项目

    // vue模块环境中默认SPA项目由 index 属性描述
    //    默认指向 public/index.html 作为入口的页面文件，默认情况下文件名必然占用 index.html
    index: {
      // page 的入口, vue项目的默认加载的第一段 JS 代码的文件所在位置
      //    ==> vue项目启动时 createApp 方法的调用文件,
      //    ==> 当完成vue应用的创建后，对应的页面模板数据将会被挂载到对应的template属性的HTML文件中
      entry: './src/main.js',
      // 模板来源，vue模块化的单页应用程序启动时的唯一 HTML 页面文件
      template: './public/index.html',
      // 定义模板文件被vue模块化环境加载后，编译成vue运行页面后浏览器访问的真实文件名称
      filename: 'index.html',
      // filename: 'test.html',
      title:"语法学习"
    },
    // 其它额外的SPA项目，可以自行定义属性名表示项目名
    film:{
      entry:"./src-film/main.js",
      template:"./public/film.html",
      filename:"film.html",
      title:"电影项目"
    }
  },

  pluginOptions: {
    'style-resources-loader': {
      // 描述项目的动态样式语言
      preProcessor: 'scss',
      patterns: [
        // 需要被作为全局动态样式加载的 scss 文件路径地址
        // "./src/assets/scss/variable.scss"
        // path.resolve 将相对路径地址直接转换为绝对路径地址
        path.resolve("./src/assets/scss/variable.scss")
      ]
    }
  }
})
